const getStudents = async () => {
  const res = await axios.get("/students")
  document.querySelector(".total").innerHTML = res.data.length
  document.querySelector(".list").innerHTML = res.data
    .map((item) => {
      return `
    <tr>
      <td>${item.name}</td>
      <td>${item.age}</td>
      <td>${item.gender === 0 ? "男" : "女"}</td>
      <td>第${item.group}组</td>
      <td>${item.hope_salary}</td>
      <td>${item.salary}</td>
      <td>${item.province + item.city + item.area}</td>
      <td>
        <a href="javascript:;" class="text-success mr-3"><i data-id='${
          item.id
        }' class="bi bi-pen"></i></a>
        <a href="javascript:;" class="text-danger"><i data-id='${
          item.id
        }' class="bi bi-trash"></i></a>
      </td>
    </tr>`
    })
    .join("")
}
// 删除
document.querySelector(".list").addEventListener("click", async function (e) {
  if (e.target.classList.contains("bi-trash")) {
    const id = e.target.dataset.id
    await axios.delete(`/students/${id}`)
    tip("删除成功")
  }
  getStudents()
})
// 处理模态框
const modal = new bootstrap.Modal(document.querySelector("#modal"))
// 新增
document
  .querySelector("#openModal")
  .addEventListener("click", async function (e) {
    document.querySelector(".modal-title").innerHTML = "添加学员"
    document.querySelector("#form").dataset.id = "add"
    await province()
    await city()
    await area()
    modal.show()
    document
      .querySelector("#submit")
      .addEventListener("click", async function (e) {
        if (form.dataset.id === "add") {
          const form = document.querySelector("#form")
          const data = serialize(form, { hash: true })
          for (const k in data) {
            if (isNaN(data[k]) === false) {
              data[k] = +data[k]
            }
          }
          await axios.post("/students", data)
          tip("添加成功")
          modal.hide()
          getStudents()
          form.reset()
        }
      })
  })
// 修改
document.querySelector(".list").addEventListener("click", async function (e) {
  if (e.target.classList.contains("bi-pen")) {
    document.querySelector(".modal-title").innerHTML = "修改学员"
    const id = e.target.dataset.id
    document.querySelector("#form").dataset.id = id
    await province()
    await city()
    await area()
    modal.show()
  }
})
// 省
const province = async () => {
  const res = await axios.get("/api/province")
  document.querySelector('[name="province"]').innerHTML = res.data
    .map((item) => {
      return `<option value="${item}">${item}</option>`
    })
    .join("")
}
// 市
const city = async () => {
  const pname = document.querySelector('[name="province"]').value
  const res = await axios.get("/api/city", { params: { pname } })
  document.querySelector('[name="city"]').innerHTML = res.data
    .map((item) => {
      return `<option value="${item}">${item}</option>`
    })
    .join("")
}
// 区
const area = async () => {
  const pname = document.querySelector('[name="province"]').value
  const cname = document.querySelector('[name="city"]').value
  const res = await axios.get("/api/area", { params: { pname, cname } })
  document.querySelector('[name="area"]').innerHTML = res.data
    .map((item) => {
      return `<option value="${item}">${item}</option>`
    })
    .join("")
}
// 省市区联动
document
  .querySelector("[name=province")
  .addEventListener("change", async function (e) {
    await city()
    await area()
  })
document.querySelector("[name=city]").addEventListener("change", function () {
  area()
})
getStudents()
